<!-- 顶部导航 -->
<template>
    <el-card id="headerNav">
        <!-- 左侧 面包屑 -->
        <div class="breadCrumb">
            <!-- 侧边栏展开收缩 控制开关 -->
            <!-- 侧边栏收缩icon -->
            <i class="el-icon-s-fold" @click="ctlAsideMenuCollapse(true)" v-show="!isAsideMenuCollapse"></i>
            <!-- 侧边栏展开icon -->
            <i class="el-icon-s-unfold" @click="ctlAsideMenuCollapse(false)" v-show="isAsideMenuCollapse"></i>
            <!-- element 面包屑组件 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
                <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                <el-breadcrumb-item>活动详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 右侧 注销登录按钮 -->
        <div class="logout">
            <el-popover placement="bottom-end" width="150" trigger="click">
                <!-- 弹出内容 -->
                <div class="showContent">
                    <!-- 头像 -->
                    <div class="userHead">
                        <el-avatar shape="square" :size="60"
                            src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
                    </div>
                    <!-- 用户名 -->
                    <h4>Admin</h4>
                    <!-- 注销按钮 -->
                    <div class="logoutBtn">
                        <el-button type="danger" size="small" @click="logout">退出登录</el-button>
                    </div>
                </div>
                <!-- 按钮 -->
                <el-button slot="reference" plain class="userBtn">
                    <el-avatar shape="square" :size="25"
                        src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"></el-avatar>
                    <span class="userName">Admin</span>
                </el-button>
            </el-popover>
        </div>
    </el-card>
</template>

<script>
// 引入vuex
import { mapState, mapMutations } from 'vuex';

export default {
    name: 'HeaderNav',
    data() {
        return {

        };
    },
    computed: {
        // 引入vuex的数据
        ...mapState(['isAsideMenuCollapse']),
    },
    methods: {
        ...mapMutations(['SetAsideMenuState','delUserInfo']),
        // 控制侧边栏是否折叠
        ctlAsideMenuCollapse(isAsideMenuCollapse) {
            this.SetAsideMenuState(isAsideMenuCollapse);
        },
        // 注销确认弹窗
        logout() {
            this.$confirm('此操作将注销账号登录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 退出登录成功弹窗
                this.$message({
                    type: 'success',
                    message: '退出登录成功!'
                });
                // 清除登录信息，跳转至登录页
                this.delUserInfo();
                this.$router.push('/login');

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消退出登录'
                });
            });
        },
    }
};
</script>

<style lang="scss" scoped>
#headerNav {
    width: 100%;

    ::v-deep .el-card__body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
    }


    // 左侧 面包屑
    .breadCrumb {
        display: flex;
        align-items: center;

        i {
            margin-right: 15px;
            font-size: 20px;
            cursor: pointer;
        }
    }

    // 右侧 注销登录
    .logout {

        // 用户按钮
        .userBtn {
            ::v-deep>span {
                display: flex;
                align-items: center;

                .userName {
                    margin-left: 8px;
                }
            }
        }
    }
}

// 用户按钮 弹出内容
.showContent {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;

    h4 {
        margin: 5px 0px;
    }
}
</style>